<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>智能养殖远程管理系统</title>
    <!-- <link rel="shortcut icon" href="./logo.png" /> -->
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <link rel="stylesheet" href="./plugins/bootstrap-4.6.1/css/bootstrap.css?v=${.Config.basic.version}">
    <link rel="stylesheet" href="./login/style.default.css?v=${.Config.basic.version}" id="theme-stylesheet">
</head>
<body>
<div class="page login-page">
    <div class="container d-flex align-items-center">
        <div class="form-holder has-shadow">
            <div class="row">
                <!-- Logo & Information Panel-->
                <div class="col-lg-6">
                    <div class="info d-flex align-items-center">
                        <div class="content">
                            <div class="logo">
                                <div></div>
                                <h1>欢迎登录</h1>
                            </div>
                            <h2>智能养殖远程管理系统</h2>
                        </div>
                    </div>
                </div>
                <!-- Form Panel    -->
                <div class="col-lg-6 bg-white">
                    <div class="form d-flex align-items-center">
                        <div class="content">
                            <!--<form class="form-validate" id="loginFrom" onclick="return checkform();">
                                <div class="form-group">
                                    <input id="login-username" type="text" name="userName" required data-msg="请输入用户名" placeholder="用户名" value="admin" class="input-material">
                                </div>
                                <div class="form-group">
                                    <input id="login-password" type="password" name="passWord" required data-msg="请输入密码" placeholder="密码" class="input-material">
                                </div>
                                <button id="login" type="button" class="btn btn-primary">登录</button>
                                <div style="margin-top: -40px;">
                                    <div class="custom-control custom-checkbox " style="float: right;">
                                        <input type="checkbox" class="custom-control-input" id="check2" >
                                        <label class="custom-control-label" for="check2">自动登录</label>
                                    </div>
                                    <div class="custom-control custom-checkbox " style="float: right;">
                                        <input type="checkbox" class="custom-control-input" id="check1" >
                                        <label class="custom-control-label" for="check1">记住密码&nbsp;&nbsp;</label>
                                    </div>
                                </div>
                            </form>-->

                            <div class="form-group">
                                <input id="login-username" class="input-material" type="text" name="loginUsername" placeholder="请输入用户名/手机号码" >
                                <div class="invalid-feedback">
                                    请输入用户名/手机号码
                                </div>

                            </div>
                            <div class="form-group">
                                <input id="login-password" class="input-material" type="password" name="loginPassword" placeholder="请输入密码"   >
                                <div class="invalid-feedback">
                                    请输入密码
                                </div>

                            </div>

                            <div class="form-group">
                                <button id="login" type="button" name="loginSubmit" class="btn btn-primary">登录</button>
                            </div>
                            <br />
                            <!--<small>没有账号?</small><a href="./Register" class="signup">&nbsp;注册</a>-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- JavaScript files-->
<script src="./plugins/jquery/jquery-1.10.2.js"></script>
<script src="./plugins/layui/layui.js"></script>
<script src="./plugins/bootstrap-4.6.1/js/bootstrap.js"></script>
<script src="./plugins/jquery.validate.min.js"></script><!--表单验证-->
<!-- Main File-->

<script>
    var $=null;

    var layer=null;

    layui.use(['layer', 'form'], function(){
        layer = layui.layer;
        $ = layui.$ //由于layer弹层依赖jQuery，所以可以直接得到

        // ------------------------------------------------------- //
        // Universal Form Validation
        // ------------------------------------------------------ //

        $('.form-validate').each(function() {
            $(this).validate({
                errorElement: "div",
                errorClass: 'is-invalid',
                validClass: 'is-valid',
                ignore: ':hidden:not(.summernote, .checkbox-template, .form-control-custom),.note-editable.card-block',
                errorPlacement: function (error, element) {
                    // Add the `invalid-feedback` class to the error element
                    error.addClass("invalid-feedback");
                    console.log(element);
                    if (element.prop("type") === "checkbox") {
                        error.insertAfter(element.siblings("label"));
                    }
                    else {
                        error.insertAfter(element);
                    }
                }
            });

        });

        // ------------------------------------------------------- //
        // Material Inputs
        // ------------------------------------------------------ //

        var materialInputs = $('input.input-material');

        // activate labels for prefilled values
        materialInputs.filter(function() { return $(this).val() !== ""; }).siblings('.label-material').addClass('active');

        // move label on focus
        materialInputs.on('focus', function () {
            $(this).siblings('.label-material').addClass('active');
        });

        // remove/keep label on blur
        materialInputs.on('blur', function () {
            $(this).siblings('.label-material').removeClass('active');

            if ($(this).val() !== '') {
                $(this).siblings('.label-material').addClass('active');
            } else {
                $(this).siblings('.label-material').removeClass('active');
            }
        });

        // ------------------------------------------------------- //
        // Footer
        // ------------------------------------------------------ //

        var contentInner = $('.content-inner');

        $(document).on('sidebarChanged', function () {
            adjustFooter();
        });

        $(window).on('resize', function () {
            adjustFooter();
        })

        function adjustFooter() {
            var footerBlockHeight = $('.main-footer').outerHeight();
            contentInner.css('padding-bottom', footerBlockHeight + 'px');
        }

        // ------------------------------------------------------- //
        // External links to new window
        // ------------------------------------------------------ //
        $('.external').on('click', function (e) {

            e.preventDefault();
            window.open($(this).attr("href"));
        });




        var flagName=false;
        var flagPas=false;
        var name,passWord;
        $("#login-username").change(function(){
            name=$("#login-username").val();
            if(name.length<1){
                $("#login-username").removeClass("form-control is-valid")
                $("#login-username").addClass("form-control is-invalid");
                flagName=false;
            }else{
                $("#login-username").removeClass("form-control is-invalid")
                $("#login-username").addClass("form-control is-valid");
                flagName=true;
            }
        })
        /*验证密码*/
        $("#login-password").change(function(){
            passWord=$("#login-password").val();
            if(passWord.length<1){
                $("#login-password").removeClass("form-control is-valid")
                $("#login-password").addClass("form-control is-invalid");
                flagPas=false;
            }else{
                $("#login-password").removeClass("form-control is-invalid")
                $("#login-password").addClass("form-control is-valid");
                flagPas=true;
            }
        })

        /*登录*/
        $("#login").click(function(){
            login();
        });
        $("#login-password").bind("keypress", function (event) {
            if (event.keyCode == 13) { login(); }
        });
    });

    if(!window.localStorage){
        layer.msg('不支持本地存储');
    }else{

    }

    function login() {
        name=$("#login-username").val();
        if(name.length<1){
            $("#login-username").removeClass("form-control is-valid")
            $("#login-username").addClass("form-control is-invalid");
            flagName=false;
        }else{
            $("#login-username").removeClass("form-control is-invalid")
            $("#login-username").addClass("form-control is-valid");
            flagName=true;
        }
        passWord=$("#login-password").val();
        if(passWord.length<1){
            $("#login-password").removeClass("form-control is-valid")
            $("#login-password").addClass("form-control is-invalid");
            flagPas=false;
        }else{
            $("#login-password").removeClass("form-control is-invalid")
            $("#login-password").addClass("form-control is-valid");
            flagPas=true;
        }




        console.info(name,passWord)

        if(flagName && flagPas){
            layer.load(1);
            $.ajax({
                type: 'POST',
                url: './Api/Login',
                data: {userid:name,password:passWord},
                success: function (data) {
                    layer.closeAll('loading');
                    //console.info(data)
                    if(data.code==200){
                        window.localStorage.setItem("expire",data.expire)
                        window.localStorage.setItem("userid",data.userid)
                        window.localStorage.setItem("token",data.token)

                        // setTimeout(function(){
                        //     window.location.href = './Dashboard/Index';
                        // },200);

                        var token = 'Bearer ' +data.token;
                        $.ajax({
                            type: 'GET',
                            url: '../Api/User',
                            data: {},
                            beforeSend: function(request) {
                                request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
                            },
                            dataType: "json",
                            success: function (data) {
                                //console.info(data)
                                window.localStorage.setItem("user_info",JSON.stringify(data))
                                if(data.default_page){
                                    setTimeout(function(){
                                        window.location.href = data.default_page;
                                    },200);
                                }
                            },
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                layer.msg('加载用户信息失败');
                            }
                        });

                    }else{
                        layer.msg('登录失败:'+data.msg);
                        $('#tips').html('账号或密码错误');
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.closeAll('loading');
                    layer.open({
                        title: '失败'
                        , content: XMLHttpRequest.status
                    });
                },
                dataType: "json"
            });
        }
    }

    function checkform() {
        return;
    }
</script>
</body>
</html>